<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }

    .tip {
        margin-left: 120px;
        margin-top: 20px;
        font-size: larger;
    }

    .layui-colla-item span {
        float: right;
        position: relative;
        display: inline-block;
        margin-top: -35px;
        margin-right: 10px;
        opacity: 0;
    }

    .layui-colla-item span:hover {
        opacity: 1;
    }
    input[readonly].layui-input {
        border: none;
        font-size: large;
    }
</style>
<body>
<!-- 新增页面时 用于添加部位时的模板 -->
<div id="partCollapseTemplet" class="layui-collapse" lay-filter="collapse" style="display: none;">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title"  name="partName">
            请选择待检查设备
        </h2>

        <div class="layui-colla-content">
            <textarea placeholder="当前部位巡检内容" class="layui-textarea"></textarea>
        </div>
    </div>
</div>
<!-- 用于在编辑页面时，来动态添加的部位选择的折叠面板 -->
<div id="partCollaItemTemplet" class="layui-colla-item" style="display: none;">
    <h2 class="layui-colla-title"  name="partName">
        请选择待检查设备
    </h2>

    <div class="layui-colla-content ">
        <textarea placeholder="当前部位巡检内容" class="layui-textarea"></textarea>
    </div>
</div>

<div class="ok-body">
    <blockquote class="layui-elem-quote layui-text">
        巡检计划详情
    </blockquote>

    <form class="layui-form" action="">
        <input type="hidden" name="id" id="id" th:value="${id}">
        <div class="layui-form-item">
            <label class="layui-form-label">计划名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" readonly class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="description" readonly class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">设备类型</label>
            <div class="layui-input-inline">
                <input type="text" name="modelName" readonly class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">计划时间</label>
            <div class="layui-input-block">
                <input type="text" id="planTime" name="planTime" readonly class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">执行周期</label>
            <div class="layui-input-inline">
                <input type="text" name="cycleType" readonly class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">计划执行人</label>
            <div class="layui-input-inline">
                <input type="text" name="operatorId" readonly class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="text" name="status" readonly class="layui-input">
            </div>
        </div>
    </form>
    <hr/>

    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 10px;">
        <legend>巡检计划内容</legend>

        <div>
            <div class="layui-collapse" id="deviceCollapse" name="deviceCollapse" lay-filter="collapse">
                <div id="deviceCollaItem" class="layui-colla-item">
                    <h2 class="layui-colla-title">
                        请选择待检查设备
                    </h2>

                    <div class="layui-colla-content layui-show">
                        <div class="layui-collapse" lay-filter="collapse">

                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title" name="partName">
                                    请选择检查部位
                                </h2>

                                <div class="layui-colla-content ">
                                    <textarea placeholder="当前部位巡检内容" class="layui-textarea"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </fieldset>
</div>


<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>
<script src="../static/js/collapse-task.js"></script>

<script th:inline="none">
    var element;
    var form;
    var layer;
    layui.use(['element', 'layer', 'jquery', 'form','util'], function () {
        element = layui.element;
        layer = layui.layer;
        form = layui.form;
        var $ = layui.jquery;
        var util = layui.util;
        var tableName = 'cycleTask';
        var id = $('#id').val();
        element.init();
        var param = 'current=1&pageSize=2&searchCol=id&searchValue=' + id;
        JJZ.requestTableData(tableName, param, function (data) {
            var result = data.records[0];
            JJZ.named('name').val(result.name);
            JJZ.named('description').val(result.description);
            JJZ.named('modelName').val(result.modelName);
            //初始化计划时间
            JJZ.named('planTime').val(util.toDateString(result.planTime, 'yyyy-MM-dd HH:mm'));
            result.status == 1 ? JJZ.named('status').val('正常') : JJZ.named('status').val('其他');
            if (result.cycleType == 1) {
                JJZ.named('cycleType').val('每天');
            } else if (result.cycleType == 2) {
                JJZ.named('cycleType').val('每周');
            } else if (result.cycleType == 3) {
                JJZ.named('cycleType').val('每月');
            } else if (result.cycleType == 4) {
                JJZ.named('cycleType').val('每半年');
            } else if (result.cycleType == 5) {
                JJZ.named('cycleType').val('每年');
            }
            JJZ.named('operatorId').val(result.operatorName);
            //初始化计划指令
            var orderList = JSON.parse(result.content);
            //这里初始化巡检计划面板
            initTaskContentDetail(orderList);

        });
    });


    String.prototype.format = function (args) {
        var result = this;
        if (arguments.length > 0) {
            if (arguments.length == 1 && typeof (args) == "object") {
                for (var key in args) {
                    if (args[key] != undefined) {
                        var reg = new RegExp("({" + key + "})", "g");
                        result = result.replace(reg, args[key]);
                    }
                }
            }
            else {
                for (var i = 0; i < arguments.length; i++) {
                    if (arguments[i] != undefined) {
                        //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题，谢谢何以笙箫的指出
                        var reg = new RegExp("({)" + i + "(})", "g");
                        result = result.replace(reg, arguments[i]);
                    }
                }
            }
        }
        return result;
    }
    String.format = function () {
        if (arguments.length == 0)
            return null;

        var str = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
            str = str.replace(re, arguments[i]);
        }
        return str;
    }

</script>
</body>
</html>